<template name="searchShopAre">
	<view class="display column shopAre">
		<view v-for="(item,index) in shopList" :key="index" class="display column calc shopItemAre borderR">
			<view class="display flow itemAre">
				<image :src="item.supplier_img"></image>
				<view class="display column shopItem">
					<view class="display flow">
						<text class="shopName">{{item.supplier_name}}</text>
						<view class="display shopBtn themeBdColor borderR" @click="shopClick(item.id)">
							<text>进店</text>
						</view>
					</view>
					<view class="display flow storeParameterAre">
						<view v-for="(parameter,index) in item.storeParameterList" :key="index"
						class="display column storeParameter">
							<text>{{parameter.num}}</text>
							<text class="pColor">{{parameter.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="display flow picAre">
				<view class="picItemAre" v-for="(goods,idx) in item.product_list" :key="idx" >
					<image :src="goods.head_img" @click="goodsClick(goods.id)" class="goodsImg"></image>
					<view class="display labelAre">
						<text>￥{{goods.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '../common/data.js'
	import {mapState} from 'vuex'
	export default {
		searchShopAre: "searchShopAre",
		props:['shopList'],
		data() {
			return {
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods:{
			goodsClick(id){
				// console.log(id)
				if(this.hasLogin){
					console.log(this.hasLogin)
					uni.navigateTo({
						url: '/subPackages/goods/goodsDetails/goodsDetails?id=' + id
					})
				}
			},
			shopClick(id){
				uni.navigateTo({
					url: '/subPackages/goods/shopAre/shopAre?shopId=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.shopAre{
		@include width;
		.shopItemAre{
			@include margin(30rpx auto 0);
			@include padding(25rpx);
			@include font;
			@include backG;
			box-shadow: 0px 0px 20rpx 0px rgba( 0, 0, 0, 0.1);
			.itemAre{
				@include justify-content('s');
				image{
					@include widthHeight(100rpx);
					@include margin(30rpx,'right');
				}
				.shopItem{
					@include width(75%);
					@include justify-content('b');
					.shopName{
						@include font;
					}
					.shopBtn{
						@include widthHeight(100rpx,40rpx);
						@include font($fontSize - 2rpx);
						@include flex-align-justify;
					}
				}
			}
			.storeParameterAre{
				@include font($fontSize - 2rpx);
				@include margin(20rpx,'top');
				.storeParameter{
					align-content: center;
					@include flex-align-justify
				}
			}
		}
		.picAre{
			@include margin(30rpx,'top');
			.picItemAre{
				@include widthHeight(200rpx);
				position: relative;
				.goodsImg{
					@include widthHeight(200rpx);
				}
				.labelAre{
					@include font($fontSize - 8rpx);
					@include backG(rgba(0,0,0,0.3),white);
					@include padding(5rpx 10rpx);
					@include flex-align-justify;
					border-top-right-radius: 10rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 9;
				}
			}
		}
	}
	
	
	
	
	
	
</style>
